import React, { useEffect, useState } from 'react';
import './index.scss';
import {cartlistAction} from '../../store/actions/cart';
import { itemlistAction } from '../../store/actions/item';
import {connect} from 'react-redux'


const Item  = (props) => {
    const [itemObj,setItemObj] = useState({})  
    const {cartlistAction,itemlist,itemlistAction} = props
    useEffect(()=>{
        console.log(props);
        itemlistAction(props);
        setItemObj(itemlist)
    },[itemlistAction])

    const addShop = () => {
        const token = localStorage.getItem("token");
        const {ptKey,name,listImages,retailPrice} = itemObj;
        if (token != null) {//判断登录状态
            //redux流程实现购物车
            console.log("实现购物车");
            const data={
                id:ptKey,
                name:name,
                img:listImages,
                price:retailPrice,
                num:1
            };
            cartlistAction(data)
        } else {
            //跳转到登录页
            props.history.push("/login");
        }
    }

    const goShop = () =>{
        props.history.push("/cart")
    }

    return (<div className="item">
        {console.log(itemObj)}
    {console.log(itemObj.sold)}
    {/* 如果异步数据，导致有些图片会报错， */}
    {itemObj !== undefined ? <div className="item_img"><img src={itemObj.listImages} alt={itemObj.name} /></div> : ''}
    <div className="item_con">
    <div className="item_price"><span>￥<span>{itemObj.retailPrice}</span><span>/{itemObj.soldUnit}</span></span><span className="del">￥{itemObj.origPrice}</span></div>
    {itemObj.sold!==undefined?<div className="item_sold">已售：{itemObj.sold}{itemObj.soldUnit}</div>:""}
    <div className="item_name">{itemObj.name}
    <span className="item_collect"><img src="https://srv.hotkidceo.com/store/static/detail/collection.png" alt="" /><span>收藏</span></span></div>
    <div className="item_description">{itemObj.description}</div>
    </div>
    
    <div className="item_buy">
    <div className="item_choosed"><span>已选</span><span>{itemObj.displayName}</span></div>
    <div className="item_forsale"><span>促销</span><img src="https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/static/home/gift.png" alt="" />
    <span>本商品当前正参与{itemObj.activiCount}项满减活动</span></div>
    <div className="item_service"><span>服务</span><img src="https://srv.hotkidceo.com/store/static/detail/service.png" alt="" /><span>企业文化</span>
    <img src="https://srv.hotkidceo.com/store/static/detail/service.png" alt="" /><span>品质保证</span>
    <img src="https://srv.hotkidceo.com/store/static/detail/service.png" alt="" /><span>快速发货</span>
    <img src="https://srv.hotkidceo.com/store/static/detail/service.png" alt="" /><span>售后无忧</span></div>
    </div>
    <div className="detail">
        <span className="item_detail">商品详情</span>
        <img src="https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/2021042811360605277.jpg" alt="" />
        <img src="https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/2021042811360605276.jpg" alt="" />
        <img src="https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/2021042811360605275.jpg" alt="" />
        <img src="https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/2021042811360605274.jpg" alt="" />
        <img src="https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/2021042811360605273.jpg" alt="" />
    </div>
    <div className="item_footer">
        <span>客服</span>
        <span onClick={goShop}>购物车</span>
        <span className="addcart" onClick={addShop}>加入购物车</span>
    </div>
    
    
</div>);
}

export default connect(state=>({itemObj:state.itemlist.itemlist}),{itemlistAction})(Item);